import React from "react";
import {ScrollView, Text, TouchableOpacity, View} from "react-native";

export default class DropDownList extends React.Component {

    constructor(props) {
        super(props);

        // this.state = {
        //     items: this.props.options,
        // };
    }

    componentDidMount() {
        this.setState({
            items: this.props.options
        })
    }

//选择回调
    onSelected(items, ids, text, selectedItem) {
        if (items) {
            for (let i = 0; i < items.length; i++) {
                let item = items[i];
                if (item.id === selectedItem.id) {
                    let t_ids = ids, t_text = text;
                    if (t_text) {
                        t_text += " - ";
                        t_ids += ",";
                    }
                    t_text += item.name;
                    t_ids += item.id;
                    if (this.props.onSelected) {
                        this.props.onSelected(t_ids, t_text, this.props.itemObj);
                    }
                    return;
                }
                if (item.subItems) {
                    if (!item.expand) {
                        continue;
                    }
                    let t_ids = ids, t_text = text;
                    if (t_text) {
                        t_text += " - ";
                        t_ids += ",";
                    }
                    t_text += item.name;
                    t_ids += item.id;
                    this.onSelected(item.subItems, t_ids, t_text, selectedItem)
                }
            }
        } else {
            this.onSelected(this.state.items, '', '', selectedItem);
        }
    }

    //创建视图
    createItemView(items, item) {
        console.log('createItem', item.name);
        const subItems = item.subItems;
        if (subItems) {  //group
            return (
                <View key={item.id}>
                    <TouchableOpacity style={_style.group} onPress={
                        () => {
                            items.map((temp) => {
                                temp.expand = temp.id === item.id ? !item.expand : false;
                            });
                            this.setState({items: this.state.items})
                        }
                    }>
                        <Text style={{color: "black"}}>{item.name}</Text>
                    </TouchableOpacity>
                    {
                        item.expand ?
                            (
                                <View style={{paddingLeft: 10}}>
                                    {
                                        item.subItems.map((item) => {
                                            return this.createItemView(subItems, item)
                                        })
                                    }
                                </View>
                            )
                            : (<View/>)
                    }
                </View>
            )
        } else {  //item
            return (
                <TouchableOpacity key={item.id} style={{padding: 5}} onPress={
                    () => {
                        this.onSelected(null, "", "", item)
                    }
                }>
                    <Text>{item.name}</Text>
                </TouchableOpacity>
            )
        }
    }

    onTouchOutside() {
        if (this.props.onTouchOutside) {
            this.props.onTouchOutside()
        }
    }

    render() {
        return (
            this.props.show ?
                <TouchableOpacity style={[_style.page]}
                                  activeOpacity={1}
                                  onPress={() => this.onTouchOutside()}
                >
                    <View>
                        <ScrollView style={[_style.scroll, {
                            left: this.props.left,
                            top: this.props.top,
                            width: this.props.width
                        }]}>
                            <View>
                                {
                                    this.state.items ?
                                        this.state.items.map((item) => {
                                            return this.createItemView(this.state.items, item)
                                        })
                                        :null
                                }
                            </View>
                        </ScrollView>
                    </View>
                </TouchableOpacity> : null
        )
    }
}

const _style = {
    page: {
        position: 'absolute',
        width: '100%',
        height: '100%'
    },
    scroll: {
        backgroundColor: 'white',
        elevation: 5,
        maxHeight: 250
    },
    group: {
        padding: 5,
        zIndex: 100,
    },
    item: {}
};
